<template>
  <div>
    <el-select v-model="props[0].fields[3].value.value" placeholder="请选择" clearable>
      <el-option v-for="item in this.dataTrigger" :key="item.value" :label="item.label" :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>

<script>
import componentRefresh from '@/mixins/componentRefresh'
export default {
  name: 'CSelect',
  mixins: [componentRefresh],
  props: {
    props: {
      type: Array,
      default: function() {
        return [
          {
            fields: []
          }
        ]
      }
    }
  },
  data() {
    return {}
  },
  computed: {
    dataTrigger() {
      if (this.props[1].fields[0].value.dataJson.json) {
        const result = this.props[1].fields[0].value.dataJson.json
        return this.getResult(result)
      } else {
        return []
      }
    }
  },
  methods: {
    getResult(json) {
      let jsonArray = []
      try {
        jsonArray = JSON.parse(json)
      } catch (e) {
        console.warn(e.message)
      }
      const model = this.props[1].fields[0].value.dataJson.model
      const fieldLabel = model[0].field
      const mappingLabel = model[0].mapping
      const keyLabel = mappingLabel || fieldLabel

      const fieldValue = model[1].field
      const mappingValue = model[1].mapping
      const keyValue = mappingValue || fieldValue

      if (jsonArray.length > 0) {
        const outJson = []
        jsonArray.forEach(element => {
          outJson.push({
            label: element[keyLabel],
            value: element[keyValue]
          })
        })
        return outJson
      } else {
        return jsonArray
      }
    }
  }
}
</script>
